<template>
  <!-- 需求单详情 -->
  <div>
    <!--信息单 -->
    <div>
      <el-row>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="1"
                        style="font-size : 20px;font : blod;color:black">新增需求单</el-menu-item>
          <span class="but">
            <el-button icon="el-icon-edit-outline">保存</el-button>
            <el-button type="primary"
                       icon="el-icon-document">提交</el-button>
          </span>
        </el-menu>
        <span>
          <font style="font-size : 15px;margin-left:20px">基本信息</font>
        </span>
      </el-row><br>
      <el-form :inline="true"
               :label-position="left"
               label-width="90px"
               :model="formLabelAlign">
        <el-row>
          <el-col span="7">
            <el-form-item label="产品线：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>

          <el-col span="7"
                  offset="1">
            <el-form-item label="品类：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>

          <el-col span="7"
                  offset="1">
            <el-form-item label="仓库：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="7">
            <el-form-item label="制单人：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>

          <el-col span="7"
                  offset="1">
            <el-form-item label="审核人：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>

          <el-col span="7"
                  offset="1">
            <el-form-item label="成色：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="7">
            <el-form-item label="制单时间：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>

          <el-col span="7"
                  offset="1">
            <el-form-item label="状态：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>

          <el-col span="7"
                  offset="1">
            <el-form-item label="单号：">
              <el-descriptions-item label="用户名">王二狗</el-descriptions-item>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   @select="handleSelect">
            <el-menu-item index="1"
                          style="font-size : 15px;color:black">产品信息</el-menu-item>
            <span class="but">
              <el-button type="primary"
                         icon="el-icon-folder-add">添加</el-button>
            </span>
          </el-menu>

        </el-row>

      </el-form>
    </div>

    <div>

      <!-- 产品信息表格 -->
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="date"
                         label="操作"
                         width="100">
        </el-table-column>
        <el-table-column prop="date"
                         label="单号"
                         width="180">
        </el-table-column>
        <el-table-column prop="date"
                         label="客户"
                         width="100">
        </el-table-column>
        <el-table-column prop="date"
                         label="部门"
                         width="100">
        </el-table-column>
        <el-table-column prop="date"
                         label="重量"
                         width="100">
        </el-table-column>
        <el-table-column prop="date"
                         label="数量"
                         width="100">
        </el-table-column>
        <el-table-column prop="date"
                         label="来货重量"
                         width="100">
        </el-table-column>
        <el-table-column prop="name"
                         label="来货数量"
                         width="100">
        </el-table-column>
        <el-table-column prop="address"
                         label="制单人"
                         width="100">
        </el-table-column>
        <el-table-column prop="date"
                         label="制单时间"
                         width="100">
        </el-table-column>
        <el-table-column prop="date"
                         label="状态"
                         width="100">
        </el-table-column>
        <el-table-column prop="date"
                         label="操作"
                         width="100">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="float:right"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="80">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      formLabelAlign: {
        name: '',
        region: '',
        type: 'aaa',
        options: [
          {
            label: '黄金糕',
          },
          {
            label: '双皮奶',
          },
          {
            label: '蚵仔煎',
          },
          {
            label: '龙须面',
          },
        ],
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王二狗',
          address: '喜洋洋',
        },
        {
          date: '2016-05-04',
          name: '王二狗',
          address: '喜洋洋',
        },
        {
          date: '2016-05-01',
          name: '王二狗',
          address: '喜洋洋',
        },
        {
          date: '2016-05-03',
          name: '王二狗',
          address: '喜洋洋',
        },
      ],
    }
  },
  methods: {
    add_rk_table: {
      //提交入库单
    },
    cancel_table: {
      //取消填写的入库单
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style scoped>
.but {
  float: right;
}
</style>